<template>
  <el-form :model="form" label-position="left" label-width="90px">
    <el-form-item label="榜单名">
      <el-input v-model="form.hotRankList" />
    </el-form-item>

    <!-- <el-form-item label="榜单名细分类">
      <el-input v-model="form.category" />
    </el-form-item> -->

    <el-form-item label="站点名称">
      <el-input v-model="form.siteName" />
    </el-form-item>

    <el-form-item label="别名">
      <el-input v-model="form.alias" />
    </el-form-item>

    <el-form-item label="资源地址">
      <el-input v-model="form.url" />
    </el-form-item>

    <el-form-item label="UserAgent">
      <el-input />
    </el-form-item>

    <el-form-item label="解析模式">
      <el-radio-group v-model="form.parseType">
        <el-radio v-for="(val, idx) in Object.keys(modelRadio)" :key="idx" :label="val" name="type" />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="解析对象">
      <el-input v-model="form.parseBean" placeholder="解析对象全类名" />
    </el-form-item>

    <el-form-item label="数组键">
      <el-input v-model="form.arrayKey" label="为空直接把当前对象解析成数组" />
    </el-form-item>

    <el-divider />

    <el-form-item>
      <el-button type="primary" @click="change(true, parseContent)">添加</el-button>
      <el-button type="primary" @click="change(false, parseContent)">删除</el-button>
    </el-form-item>

    <el-form-item label="匹配规则">
      <el-row v-for="(item, index) in parseContent" :key="index">
        <el-col :span="6">
          <el-input v-model="item.tag" placeholder="标签" />
        </el-col>

        <el-col :span="16">
          <el-input v-model="item.value" :placeholder="modelRadio[form.parseType]" />
        </el-col>
        <el-col :span="2"> </el-col>
      </el-row>
    </el-form-item>

    <el-divider />

    <el-form-item label="过滤规则">
      <el-switch v-model="filter" />
    </el-form-item>
    <el-form-item v-if="filter">
      <el-form label-position="left">
        <el-form-item label="匹配到"> <el-input v-model="form.serializeFilterRuler.hasKey" placeholder="匹配到该值就过滤"></el-input> 　 </el-form-item>

        <el-form-item label="未匹配到">
          <div>
            <el-input v-model="form.serializeFilterRuler.notKey" placeholder="未匹配到该值就过滤"></el-input>
          </div>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存数据</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { computed, reactive, ref, useAttrs, onUnmounted, watch } from 'vue'
import msg from '@/utils/message.js'
// import { postTest } from '@/api/resource.js'
import { saveSite } from '@/api/u/manager.js'
const attrs = useAttrs()

console.log('attrs.data', attrs)
class Format {
  constructor(tag, value) {
    this.tag = tag
    this.value = value
  }
}
class Category {
  constructor(name, child) {
    this.name = name
    this.child = child
  }
}
class Header {
  constructor(k, v) {
    this.k = k
    this.v = v
  }
}

const filter = ref(false)
const modelRadio = { xPath: 'xPath', json: 'json Ognl表达式' } // json: 'json', document: '文档', javaBean: 'java全类名'
const parseContent = reactive([new Format('title', 'title'), new Format('address', '')])

let form = reactive({
  available: true,
  parseBean: 'com.hotlist.core.JSONHotResource',
  hotRankList: undefined,
  siteName: undefined,
  alias: undefined,
  url: undefined,
  userAgent: [],
  category: {},
  parseType: 'json',
  json: {
    key: undefined
  },
  xPath: {
    key: undefined
  },
  serializeFilterRuler: {
    hasKey: undefined,
    notKey: undefined,
    excludeMap: {}
  },
  showConfig: {
    config: {

    },
    pageConfig: {
      
    }
  }
})

watch(
  () => form.parseType,
  (val) => {
    if (val === 'xPath') {
      form.parseBean = 'com.hotlist.core.DocumentHotResource'
    } else if (val === 'json') {
      form.parseBean = 'com.hotlist.core.JSONHotResource'
    }
  }
)

form.arrayKey = computed({
  get() {
    console.log('arraykGet')

    return form[form.parseType].key
  },
  set(val) {
    form[form.parseType].key = val
    //TODO 其他key置空
  }
})

const onSubmit = () => {
  saveSite(form)
    .then((result) => {
      msg('保存成功', 'success')
    })
    .catch((err) => {})
}

const change = (bool, arr) => {
  if (bool) {
    arr.push(new Format())
  } else {
    arr.pop()
  }
}

if (attrs.site != undefined) {
  form = reactive(attrs.site)
  // 把站点里的map转换成Format结构
  parseContent.length = 0
  for (let k in form.parseContent) {
    parseContent.push(new Format(k, form.parseContent[k]))
  }

  change(true, parseContent)
  filter.value = true
}

form.parseContent = computed({
  get() {
    let content = {}
    parseContent.forEach((e) => {
      if (e.tag != '') {
        content[e.tag] = e.value
      }
    })
    return content
  },
  set(val) {
    for (let k in val) {
      parseContent.push(new Format(k, form.parseContent[k]))
    }
  }
})

// map绑定v-model

onUnmounted(() => {
  // console.log('xiezaile')
})

const changeParseContent = (bool) => {
  if (bool) {
    parseContent.push(new Format())
  } else {
  }
}
</script>

<style></style>
